<script setup>
 import * as echarts from 'echarts';
 import axios from "axios";
 import {onMounted, reactive} from "vue";

 const mine = reactive({
   charList:{
     chartProduct:"",
     chartAddress:"",
     chartCustomer:"",
   }
 })

 function getProductStatistics(){
   axios({
     url:"http://localhost:8080/boot/policy/getProductStatistics"
   }).then((result)=>{
     mine.data = result.data
     mine.charList.chartProduct.setOption({
       title: {//生成图表的标题
         text: "保单产品数量占比图",
         left: 'left'
       },legend: {
         orient: 'vertical',
         left: 'right'
       },
       series:[
         {
           type:"pie",
           // radius:150,  半径
           data:result.data
         }
       ]
     })
     return result.data
   })
 }

 function getAddressStatistics(){
   axios({
     url:"http://localhost:8080/boot/policy/getAddressStatistics"
   }).then((result)=>{
     mine.data = result.data
     mine.charList.chartAddress.setOption({
       title: {//生成图表的标题
         text: "客户地区占比图",
         left: 'left'
       },legend: {
         orient: 'vertical',
         left: 'right'
       },
       series:[
         {
           type:"pie",
           // radius:150,  半径
           data:result.data
         }
       ]
     })
   })
 }

 function getCustomerStatistics(){
   axios({
     url:"http://localhost:8080/boot/policy/getCustomerStatistics"
   }).then((result)=>{
     mine.data = result.data
     const names = result.data.map(function (item) {
       return item.name;
     });

     const values = result.data.map(function (item) {
       return item.value;
     });

     mine.charList.chartCustomer.setOption({
       title: {//生成图表的标题
         text: "客户购买力排行图",
         left: 'left'
       },legend: {
         data:['销量']
       },
       xAxis: {
         data: names
       },yAxis: {},
       series: [{
         type:"bar",
         data: values
       }]
     })
   })
 }

 onMounted(()=>{
   mine.charList.chartProduct=echarts.init(document.getElementById("chartProduct"))
   getProductStatistics()
   mine.charList.chartAddress=echarts.init(document.getElementById("chartAddress"))
   getAddressStatistics()
   mine.charList.chartCustomer=echarts.init(document.getElementById("chartCustomer"))
   getCustomerStatistics()
 })



</script>

<template>
  <el-row style="height: 50vh">
    <el-col :span="12">
      <div id="chartProduct" style="width: 100%;height:100%; display: flex;">
      </div>
    </el-col>
    <el-col :span="12">
      <div id="chartAddress" style="width: 100%;height:100%; display: flex;">
      </div>
    </el-col>
  </el-row>
  <el-row style="height: 50vh">
    <el-col :span="24">
      <div id="chartCustomer" style="width: 100%;height:100%; display: flex;">
      </div>
    </el-col>
  </el-row>
</template>